<template>
    <div class="main-box" v-if="isRouterAlive">
        <div class="box-title">

            <div class="title-text" @click="ii">

                <div class="text">用户名</div>
                <div class="text">姓名</div>
                <div class="text">性别</div>
                <div class="text">角色</div>
                <div class="content-bt"></div>
            </div>
        </div>
        <div class="box-content" v-for="item in msglist" :key="item.id">
            <div class="content-msg" v-if="item.role != 'admin'">
                <div class="text">{{ item.username }}</div>
                <div class="text">{{ item.name }}</div>
                <div class="text">{{ item.sex }}</div>
                <div class="text">{{ item.role }}</div>
                <div class="content-bt">
                    <div class="bt" @click="this.opbt = !this.opbt, open(item.id)">编辑</div>
                    <div class="bt" @click="userdelete(item.id)">删除</div>
                </div>
            </div>
        </div>
        <div v-if="this.opbt" class="mengceng">
            <div class="submitfrom">

                <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <div class="from-box" v-for="(item, index) in this.username.list" :key="index">
                        <div class="img">
                            <img class="img-touxiang" :src="item.img" alt="">
                            <div class="guanbi" @click="this.opbt = !this.opbt"><img src="/static/img/guanbi.svg" alt="">
                            </div>
                        </div>
                        <div class="msg">
                            <div class="msg-left">
                                <el-form-item label="用户名" prop="username">
                                    <el-input type="text" v-model="item.username" :placeholder="item.username"
                                        autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="password">
                                    <el-input type="text" v-model="item.password" :placeholder="item.password"
                                        autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="角色" prop="role">
                                    <el-input type="text" v-model="item.role" :placeholder="item.role"
                                        autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="性别" prop="sex">
                                    <el-input type="text" v-model="item.sex" :placeholder="item.sex"
                                        autocomplete="off"></el-input>
                                </el-form-item>
                            </div>
                            <div class="msg-right">
                                <el-form-item label="名字" prop="name">
                                    <el-input type="text" v-model="item.name" :placeholder="item.name"
                                        autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="联系电话" prop="phone">
                                    <el-input type="text" v-model="item.phone" :placeholder="item.phone"
                                        autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="安全码" prop="securitycode">
                                    <el-input type="text" v-model="item.securitycode" :placeholder="item.securitycode"
                                        autocomplete="off"></el-input>
                                </el-form-item>
                            </div>

                        </div>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(item.id)">提交</el-button>
                            <el-button type="primary" @click="ss()">sss</el-button>

                        </el-form-item>
                    </div>

                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { h } from 'vue'
import { ElMessage } from 'element-plus'

export default {

    props: ['msglist'],

    data() {
        return {
            isRouterAlive: true,
            opbt: false,
            username: {
                list: [{}]
            },
            ruleForm: {
                username: '',
                password: '',
                role: '',
                sex: '',
                name: '',
                phone: '',
                img: '',
                securitycode: ''
            }
        }
    },
    computed: {
        Number() {
            return  JSON.parse(JSON.stringify(this.msglist)) 
        },
    },
    methods: {

        ss() {
            console.log([...this.Number]);
        },
        open(id) {
            axios.get('/api/userid?id=' + id).then(res => {
                // console.log(res)
                this.username.list = res.data
                // console.log(this.ruleForm)
            })

        },
        submitForm(myid) {
            //   console.log(this.username.list[0].username)

            axios.post('/api/updata?id=' + myid +
                '&password=' + this.username.list[0].password +
                '&role=' + this.username.list[0].role +
                '&sex=' + this.username.list[0].sex +
                '&name=' + this.username.list[0].name +
                '&securitycode=' + this.username.list[0].securitycode +
                '&phone=' + this.username.list[0].phone
            ).then(res => {
                ElMessage({
                    message: h('p', null, [
                        h('span', null, '更改成功'),
                        h('i', { style: 'color: teal' }, 'VNode')
                    ])
                })
            })
        },
        userdelete(id) {

            axios.delete('/api/userdelete?id=' + id).then(ref => {
            })
        }

    }

}

</script>

<style scoped lang="scss">
.main-box {
    // height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;

    .box-title {
        height: 30px;
        position: sticky;
        top: 0;
        background-color: #cccccc;

        .title-text {
            height: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .content-bt {
                width: 140px;
            }

        }
    }

    .text {
        width: 100px;
        text-align: center;
    }

    .box-content {
        width: 100%;
        background-color: #ffffff;

        .content-msg {
            height: 50px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-bottom: 1px solid #cccccc;
        }

        .content-msg:hover {
            background-color: #0099CC;
        }

        .content-bt {
            width: 140px;
            display: flex;

            .bt {
                height: 25px;
                width: 50px;
                margin: 0 10px;
                text-align: center;
                line-height: 25px;
                border-radius: 20px;
                background-color: #99CCCC;
                cursor: pointer;
            }
        }
    }

    .mengceng {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        min-width: 1000px;
        background-color: rgba($color: #000000, $alpha: 0.3);
        z-index: 99;
    }

    .submitfrom {
        width: 80%;
        height: 500px;
        position: relative;
        top: 100px;
        left: 100px;
        background-color: #ffffff;
        min-width: 800px;
        padding: 20px;
        z-index: 100;
        border-radius: 20px;

        .from-box {
            display: flex;
            flex-direction: column;
        }

        .img {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #cccccc;

            .img-touxiang {
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }

            .guanbi {
                width: 50px;
                height: 50px;
                cursor: pointer;

                img {
                    width: 50px;
                    height: 50px;
                }
            }
        }

        .msg {
            margin-top: 20px;
            display: flex;
        }
    }

    .el-input {
        width: 200px;

    }

}
</style>